<template>
  <BaiduMap
      class="map"
      :center="center"
      :zoom="zoom"
      :scroll-wheel-zoom="true"
      :ak=BaiduMapAK
      :mapStyle="mapStyle"
      v="3.0"
      type="API"
      @ready="handler"
  >
    <BmNavigation anchor="BMAP_ANCHOR_TOP_RIGHT" :offset='{height:520,width:10}'></BmNavigation>
    <!--    分别是二维地图和卫星地图-->
    <BmMapType :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" :offset="{height:10, width:650}"></BmMapType>
    <!--    全景控件-->
    <BmPanorama></BmPanorama>
    <!--    城市列表-选择城市搜索城市(支持市级以上搜索)-->
    <BmCityList anchor="BMAP_ANCHOR_TOP_LEFT" :offset="{height:40,width:28}"></BmCityList>
    <!--行政区划-->
    <BmBoundary
        name="朝阳区"
        :strokeWeight="2"
        strokeColor="#5679ea"
        fillColor="#5679ea"
        fillOpacity="0.5"
    ></BmBoundary>
    <!--标注点-->
    <BmMarker
        v-for="(item, index) in points"
        :key="index"
        :position="{ lng: item.lng, lat: item.lat }"
        :dragging="true"
        :icon="{ url: '你的url', size: { width: 30, height: 18 } }"
        @click="openInfo(item)"
    >
    </BmMarker>
    <!--信息窗口-->
    <BmInfoWindow
        :position="showInfoWindow.position"
        :show="showInfoWindow.open"
        @close="showInfoWindow.open = false"
        @open="showInfoWindow.open = true"
    >
      {{ showInfoWindow.content }}
    </BmInfoWindow>
  </BaiduMap>
</template>

<script setup>
import {ref} from 'vue'
import { BaiduMap, BmMarker, BmInfoWindow, BmBoundary, BmNavigation, BmMapType, BmPanorama,BmCityList } from 'vue-baidu-map-3x'
//地图样式
import mapStyles from '@/assets/json/custom_map_config.json'
const center = ref({ lng: 106.404, lat: 28.915 }) //地图中心点
const zoom = ref(10)//地图层级
const BaiduMapAK = ref('fLnVrrU1OewzCQT1DXE7rkbHiGSDF1aj')//百度AK
const handler = ({ BMap, map }) => {//地图加载完事件
  console.log(BMap, map)
}
//marker坐标数组
const points = ref([
  { lng: '106.295', lat: '28.915', content: '云阳' },
  { lng: '107.079', lat: '29.898', content: '奉节' }
])

const mapStyle = ref({
  styleJson: mapStyles
})
//信息窗口的内容
const showInfoWindow = ref({
  open: false,
  content: '',
  position: ''
})
//点击marker事件，打开信息窗口
const openInfo = (item) => {
  console.log(item)
  showInfoWindow.value.open = true
  showInfoWindow.value.content = item.content
  showInfoWindow.value.position = { lng: item.lng, lat: item.lat }
}

</script>

<style scoped>

.map {
  width: 100%;
  height: 100%;
}
</style>